<!DOCTYPE html>
<html lang="ch">
{% load my_tag my_filter %}
<head>
    <meta charset="UTF-8">
    <title>{{ SITE_TITLE }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" sizes="any" href="/static/1.ico">
    <link rel="stylesheet" href="/static/my/css/reset.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/elementui/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/fontawesome-free-5/css/all.min.css">
    <link rel="stylesheet" href="/static/my/css/base.css">
    {% block css %}
        <link rel="stylesheet" href="/static/my/css/index.css">
        {#        <link rel="stylesheet" href="/static/my/css/index/card.css">#}
    {% endblock %}
    {#    <link rel="stylesheet" href="/static/my/css/index/card.css">#}
    <link rel="stylesheet" href="/static/my/css/match/notebook.css">
    <link rel="stylesheet" href="/static/my/css/match/phone.css">
    {% if MUSIC_GROUP_ID %}
        <link rel="stylesheet" href="/static/aplayer/aplayer.css">
    {% endif %}
    <link rel="stylesheet" href="/static/mini_player/index.bundle.css">
</head>
<body>
<div id="app">
    <link rel="stylesheet" :href="'/static/my/css/theme/' + theme + '.css'">
    <el-scrollbar ref="scrollbar" style="height: 100vh">
        <!--手机端展示的目录-->
        <el-drawer
                style="display: none"
                custom-class="nav_drawer_class"
                title="我是标题"
                :modal="false"
                :with-header="false"
                size="40%"
                @close="nav_close"
                @open="nav_open"
                :visible.sync="nav_drawer"
                direction="ltr">
            <div class="nav_content">
                <div class="title">
                    <img src="/static/favicon.ico" alt="">
                    <h2>道元仪个人博客</h2>
                </div>
                <div class="content">
                    {% dynamic_navigation request %}
                </div>
            </div>
        </el-drawer>

        <!-- 目录区域 -->
        <nav class="nav_bg">
            <div class="left" id="dynamic_nav">
                {% dynamic_navigation request %}
                <a @click="nav_drawer = true" class="nav_slide" href="javascript:void(0);"><i
                        class="fa fa-align-justify"></i></a>
                {% block search %}
                    <div class="search">
                        <input v-model="search_key" @keydown.enter="search()" type="text" class="search_box"
                               placeholder="搜索你想要的内容">
                        <button @click="search()"><i class="fa fa-search"></i></button>
                    </div>
                {% endblock %}

            </div>
            <div class="right">
                <img v-show="theme === 'light'" src="/static/my/img/nav/light.svg" @click="setTheme('dark')">
                <img v-show="theme === 'dark'" src="/static/my/img/nav/dark.svg" @click="setTheme('light')">

                {% if request.user.is_authenticated %}
                    <img src="{{ request.user|get_avatar }}" style="border-radius: 50%" class="avatar" alt="">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ request.user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><a href="/backend/" target="_blank">个人中心</a></el-dropdown-item>
                            <el-dropdown-item><a href="/backend/edit_avatar/" target="_blank">修改头像</a>
                            </el-dropdown-item>
                            <el-dropdown-item><a href="/backend/add_article/" target="_blank">发布文章</a>
                            </el-dropdown-item>
                            {% if request.user.is_superuser %}

                                <el-dropdown-item><a href="/admin/" target="_blank">后台管理</a></el-dropdown-item>
                            {% endif %}
                            <el-dropdown-item><a href="/logout/">注销退出</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                {% else %}
                    <a href="/login">登入</a>
                    <a href="/sign">注册</a>
                {% endif %}
            </div>
        </nav>

        {% block banner %}
            {% banner 'index' %}
        {% endblock %}
        <!-- 中心区域 -->
        <main>
            {% csrf_token %}
            {% block main %}
                {% csrf_token %}
                {#                <canvas id="canvas"></canvas>#}
                <div class="main">
                    <div class="left">
                        <div class="boutique_article card">
                            <div class="title">
                                <h2>精选文章</h2>
                                <div class="switch_article_category">
                                <span :active="this_category === 'qianduan'"
                                      @click="switch_article_category('qianduan')">前端</span>
                                    <span :active="this_category === 'houduan'"
                                          @click="switch_article_category('hou')">后端</span>
                                </div>
                            </div>
                            <div class="body">
                                <ul v-show="this_category === 'qianduan'" class="qianduan">
                                    {% for fontend in fontend_list %}
                                        <li>
                                            <div class="left">
                                                <div>
                                                    <a href="/article/{{ fontend.nid }}/" target="_blank">
                                                        <img src="{{ fontend.cover.url.url }}" alt="">
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="right">
                                                <h2><a href="/article/{{ fontend.nid }}/"
                                                       target="_blank">{{ fontend.title }}</a></h2>
                                                <p>{{ fontend.abstract }}</p>
                                                <span>{{ fontend.create_date|date_humaniz }}</span>
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                                <ul v-show="this_category === 'hou'" class="hou">
                                    {% for backend in backend_list %}
                                        <li>
                                            <div class="left">
                                                <div>
                                                    <a href="/article/{{ backend.nid }}/" target="_blank">
                                                        <img src="{{ backend.cover.url.url }}" alt="">
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="right">
                                                <h2><a href="/article/{{ backend.nid }}/"
                                                       target="_blank">{{ backend.title }}</a></h2>
                                                <p>{{ backend.abstract }}</p>
                                                <span>{{ backend.create_date|date_humaniz }}</span>
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <div class="hotList card">
                            <div id="con">

                            </div>
                            <div class="title">
                                <h2 id="pos">今日热搜</h2>
                                <div>
                                    <a href="/news/">查看更多</a>
                                </div>
                            </div>
                            <div class="body">
                                <div v-for="item in news_list" :key="item.index">
                                    <span class="index">[[item.index]]</span>
                                    <a :href="item.link" target="_blank">[[item.title]]</a>
                                    <span class="num">[[item.hotValue]]</span>
                                </div>
                            </div>
                        </div>

                        {% if CALENDAR %}
                            <div class="card">
                                <div class="title">
                                    <h2>文章日历</h2>
                                </div>
                                <div class="body">
                                    <div id="post-calendar" style="height: 150px">
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        <div class="all_article card">
                            <div class="title">
                                <h2>博客文章</h2>
                            </div>
                            <div class="body">
                                <ul class="article_content">
                                    {% if request.user.is_superuser %}
                                        <el-dialog
                                                title="修改文章封面"
                                                :visible.sync="edit_cover_dialog"
                                                width="40%">
                                            <div class="dialog_content">
                                                <div>
                                                    <label for="">文章封面</label>
                                                    <el-select v-model="edit_cover.nid"
                                                               placeholder="请选择文章封面">
                                                        {% for cover in cover_list %}
                                                            <el-option
                                                                    label="{{ cover.url.url }}"
                                                                    value="{{ cover.nid }}">
                                                                <img src="{{ cover.url.url }}"
                                                                     alt="">
                                                            </el-option>
                                                        {% endfor %}
                                                    </el-select>
                                                </div>
                                            </div>
                                            <span slot="footer" class="dialog-footer">
                                            <el-button @click="edit_cover_dialog = false">取 消</el-button>
                                            <el-button type="primary"
                                                       @click="edit_cover_method(edit_cover.aid)">确 定</el-button>
                                      </span>
                                        </el-dialog>
                                    {% endif %}

                                    {% for article in article_list %}
                                        <li>
                                            {% if article.abstract %}
                                                <div class="category_flag"
                                                     len="{{ article.get_category_display|length }}"
                                                     type="{{ article.get_category_display }}">
                                                    {{ article.get_category_display }}
                                                </div>
                                            {% endif %}

                                            <div class="left">
                                                <div>
                                                    <a href="/article/{{ article.nid }}/" target="_blank">
                                                        <el-image
                                                                scroll-container=".el-scrollbar__wrap"
                                                                @contextmenu.ctrl.prevent="show_edit_cover('{{ article.nid }}', '{{ article.cover.nid }}')"
                                                                src="{{ article.cover.url.url }}" lazy alt="">
                                                            <div slot="placeholder" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="right">
                                                <h2><a href="/article/{{ article.nid }}/"
                                                       target="_blank">{{ article.title }}</a></h2>
                                                <p>{{ article.abstract }}</p>

                                                <div class="article_info">
                                                    <div class="article_info_right">
                                                    <span>
                                                        <i class="far fa-eye"></i>{{ article.look_count }}
                                                    </span>
                                                        <span>
                                                        <i class="far fa-thumbs-up"></i>{{ article.digg_count }}
                                                    </span>
                                                        <span class="netbook phone_550">
                                                        <i class="far fa-star"></i>{{ article.collects_count }}
                                                    </span>
                                                        <span class="netbook phone_550">
                                                        <i class="far fa-comment-dots"></i>{{ article.comment_count }}
                                                    </span>
                                                        {% if article.pwd %}
                                                            <span class="netbook phone_550">
                                                            <i class="fa fa-lock"></i>
                                                        </span>
                                                        {% endif %}
                                                    </div>
                                                    <div class="article_info_right">
                                                    <span>
                                                        <i class="far fa-user"></i>{{ article.author }}
                                                    </span>
                                                        <span>
                                                        <i class="far fa-clock"></i>{{ article.create_date|date:'Y-m-d' }}
                                                    </span>
                                                    </div>
                                                </div>

                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                                <ul class="pager">
                                    {{ pager.page_html|safe }}
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="right">
                        <div class="user_card">
                            <div class="lines"></div>
                            {% if request.user.is_authenticated %}
                                <div class="imgBx">
                                    <img src="{{ request.user|get_avatar }}"
                                         alt="">
                                </div>
                            {% else %}
                                <div class="imgBx" style="border-radius: 50%;">
                                    <img src="http://cdn.qiniu.daoyuanyi.com/blog/avatar/my/9.png"
                                         alt="" style="position: absolute; top: 0; left: 1px;width: 100%;height: 100%">
                                </div>
                            {% endif %}

                            {#                            </div>#}
                            <div class="content">
                                <div class="details">
                                    {% if request.user.is_superuser or request.user.is_authenticated %}
                                        <h2>{{ request.user.username }}<br><span
                                                class="introduce">{{ request.user.abstract }}</span></h2>
                                        <div class="actions">
                                            <div class="actions_tag">
                                                <div class="actions_all">
                                                    {% for tag in request.user.tag.all %}
                                                        <div class="item">{{ tag.title }}</div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% else %}
                                        <h2>道元仪<br><span class="introduce">程序员小白一枚，请大家多多指教</span></h2>
                                        <div class="actions">
                                            <div class="actions_tag">
                                                <div class="actions_all">
                                                    {% for tag in ouser.tag.all %}
                                                        <div class="item">{{ tag.title }}</div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                    <div class="data">
                                        <h3>{{ article_count }}<br><span>文章</span></h3>
                                        <h3>{{ user_count }}<br><span>用户</span></h3>
                                        <h3>{{ nav_count }}<br><span>网址</span></h3>
                                    </div>
                                    <div class="actionBtn">
                                        <button @click="to_bilibili">+ 关注</button>
                                        <button @click="call_me">私信</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {% if IS_ADVERTIS and advert_list.count %}
                            <div class="advertisement card">
                                <div class="title">
                                    <h2>独家广告</h2>
                                    {#                                    <div>#}
                                    {#                                        <a href="#">申请</a>#}
                                    {#                                    </div>#}
                                </div>
                                <div class="body">
                                    <el-carousel :interval="5000" trigger="click" class="adv_img_list" height="200px">
                                        {% for advert in advert_list|generate_advert %}
                                            <el-carousel-item v-for="item in 4" :key="item">
                                                <a title="{{ advert.title }}" href="{{ advert.href }}">
                                                    <img src="{{ advert.url }}"
                                                         alt="">
                                                </a>
                                            </el-carousel-item>
                                        {% endfor %}
                                    </el-carousel>
                                </div>
                            </div>
                        {% endif %}

                        <div class="tags card">
                            <div class="title">
                                <h2>标签云</h2>
                            </div>
                            <div class="body">
                                <ul>
                                    {% generate_tag_html %}
                                </ul>
                            </div>
                        </div>

                        <div class="site_info card">
                            <div class="title">
                                <h2>站点信息</h2>
                            </div>
                            <div class="body">
                                <div class="item"><b>建站时间:</b> <span>{{ SITE_INFO.date }}</span></div>
                                <div class="item"><b>网站程序:</b> <span>Django+Vue.js</span></div>
                                <div class="item"><b>网站版本:</b> <span><a href="/">{{ VERSION }}</a></span></div>
                                <div class="item"><b>在线人数:</b> <span>{{ online_count }}</span></div>
                                <div class="item"><b>前端文章:</b> <span>{% calculation_category_count 1 %}</span></div>
                                <div class="item"><b>后端文章:</b> <span>{% calculation_category_count 2 %}</span></div>
                                <div class="item"><b>项目相关:</b> <span>{% calculation_category_count 3 %}</span></div>
                                <div class="item"><b>网站空间:</b> <span>阿里云服务器</span></div>
                                <div class="item"><b>订阅内容:</b>
                                    <div class="images">
                                        <div class="qq">
                                            <div class="el-image">
                                                <img src="/static/my/img/footer/qq.jpg" alt="我的QQ"
                                                     class="el-image__inner el-image__preview">
                                            </div>
                                            我的QQ
                                        </div>
                                        <div class="qq">
                                            <div class="el-image">
                                                <img src="/static/my/img/footer/weichat.png" alt="我的微信"
                                                     class="el-image__inner el-image__preview">
                                            </div>
                                            我的微信
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="feedback card">
                            <div class="title">
                                <h2>意见反馈</h2>
                            </div>
                            <div class="body">
                                <el-input
                                        id="feedback__email"
                                        placeholder="请输入用于接收反馈的邮箱"
                                        v-model="feedback.email">
                                </el-input>
                                <el-input
                                        id="feedback__content"
                                        placeholder="请输入你对网站的建议"
                                        type="textarea"
                                        :rows="6"
                                        resize="none"
                                        v-model="feedback.content">
                                </el-input>
                                <el-button type="primary" @click="feedback_add">确 定</el-button>
                            </div>
                        </div>

                        <div class="links card">
                            <el-dialog
                                    title="申请友链"
                                    :visible.sync="friends_links_dialog"
                                    width="30%">
                                <div class="dialog_content">
                                    <div>
                                        <label for="site_add__title">网站标题</label>
                                        <el-input
                                                id="site_add__title"
                                                placeholder="请输入你的网站标题"
                                                v-model="site.title">
                                        </el-input>
                                    </div>
                                    <div>
                                        <label for="site_add__href">网站链接</label>
                                        <el-input
                                                id="site_add__href"
                                                placeholder="请输入你的网站链接"
                                                v-model="site.href">
                                        </el-input>
                                    </div>
                                    <div>
                                        <label for="site_add__abstract">网站描述</label>
                                        <el-input
                                                id="site_add__abstract"
                                                placeholder="请输入你的网站描述"
                                                type="textarea"
                                                :rows="4"
                                                resize="none"
                                                v-model="site.abstract">
                                        </el-input>
                                    </div>
                                    <div>
                                        <label for="site_add__abstract">网站图片</label>
                                        <div class="flex">
                                            <el-input
                                                    id="site_add__abstract"
                                                    placeholder="请输入你的网站图标的在线链接"
                                                    class="icon_href"
                                                    v-model="site.icon_href">
                                            </el-input>
                                            <div class="icon_img">
                                                <img :src="site.icon_href" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="friends_links_dialog = false">取 消</el-button>
                                    <el-button type="primary" @click="friend_link_add">确 定</el-button>
                              </span>
                            </el-dialog>
                            <div class="title">
                                <h2>友情链接</h2>
                                <div>
                                    <a href="javascript:void (0);" @click="friends_links_dialog = true">申请友链</a>
                                </div>
                            </div>
                            <div class="body">
                                <ul>
                                    {% for link in link_list %}
                                        <li>
                                            <a href="{{ link.href }}" target="_blank">{{ link.title }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                {#                <div class="canvas">#}
                {#                    <canvas id="my_canvas"></canvas>#}
                {#                </div>#}
                {#                <canvas class="fireworks" id="my_canvas"#}
                {#                        style="position: fixed; top: 700px; left: 0px; pointer-events: none; z-index: 0; width: 100%;"></canvas>#}

            {% endblock %}
        </main>
        <footer>
            <div class="left">
                <p class="thank">Thank For</p>
                <p class="info">
                    <img src="/static/my/img/footer/aliyun.ico" alt="">
                    <span>阿里云服务器</span>
                    <img src="/static/my/img/footer/tencent.png" alt="">
                    <span>腾讯云SSL证书</span>
                    <img src="/static/my/img/footer/qiniu.png" alt="">
                    <span>七牛云存储</span>
                </p>
                <p class="version">
                    <span>version</span>
                    <span>{{ VERSION }}</span>
                </p>
                <p>建站日期：{{ SITE_INFO.date }}</p>
                <p class="beian">
                    <img src="/static/my/img/footer/badges.png" alt="">
                    <a href="https://beian.miit.gov.cn/">{{ SITE_BEIAN }}</a>
                </p>
            </div>
            <div class="right">
                <div class="my_info">
                    <div class="qq" title="我的QQ">
                        <img class="show_img" src="/static/my/img/footer/qq.jpg" alt="">
                        <img class="img" src="/static/my/img/footer/qq_icon.svg" alt="">
                    </div>
                    <div class="wechat" title="我的微信">
                        <img class="show_img" src="/static/my/img/footer/weichat.png" alt="">
                        <img class="img" src="/static/my/img/footer/wexin_icon.svg" alt="">
                    </div>
                    <div title="我的哔哩哔哩">
                        <a href="https://space.bilibili.com/482546956" target="_blank">
                            <img class="img" src="/static/my/img/footer/bilibili_icon.svg" alt="">
                        </a>

                    </div>
                    <div title="gitee">
                        <a href="https://gitee.com/DaoYuanYi" target="_blank">
                            <img class="img" src="/static/my/img/footer/gitee_icon.svg" alt="">
                        </a>
                    </div>
                    <div title="GitHub">
                        <a href="https://github.com/daoyuanyi/" target="_blank">
                            <img class="img" src="/static/my/img/footer/github_icon.svg" alt="">
                        </a>
                    </div>
                </div>
                <p>
                    <span>联系邮箱：{{ SITE_INFO.email }}</span>
                </p>
            </div>
        </footer>
    </el-scrollbar>
</div>
{#<canvas id="my_canvas"></canvas>#}

{% if MUSIC_GROUP_ID %}
    <div id="aplayer"></div>
{% endif %}

</body>
<script src="/static/vue/vue.js"></script>
<script src="/static/jquery/jquery.min.js"></script>
<!-- 引入组件库 -->
<script src="/static/elementui/index.js"></script>
<script src="/static/axios/axios.min.js"></script>
<script src="/static/my/js/vendor.js"></script>
<script src="/static/my/js/index.js"></script>

<script async src="/static/my/js/plug/click_word.js"></script>

<!-- petite-vue CDN -->
<script src="https://unpkg.com/petite-vue"></script>
<script async src="/static/mini_player/index.bundle.js"></script>

{#<script defer src="/static/my/js/plug/sakura.js"></script>#}
{#<script defer src="/static/my/js/plug/snow3.js"></script>#}

<script defer src="/static/live2dw/lib/L2Dwidget.min.js"></script>
<script defer src="/static/live2dw/live2dw.js"></script>
{% block js %}
    <script>
        // 获取需要轮播的div
        let menu_img = document.querySelectorAll('.dynamic_shuffl')

        let banner = document.getElementById('banner_box')
        let banner_time = Number(banner.getAttribute('banner_time'))
        // 获取它的长度
        let menu_length = menu_img.length
        // 初始位置
        let index = 0
        let timer = null;
        clearInterval(timer)
        timer = setInterval(() => {
            index++
            // 到头了
            if (index === menu_length) {
                index = 0
            }
            // 样式复原操作
            for (let i of menu_img) {
                i.style.opacity = 0
            }
            menu_img[index].style.opacity = 1
            if (!banner_time) {
                clearInterval(timer)
            }

        }, banner_time * 1000)


        let banner_slogan = document.getElementById('banner_slogan')
        let slogan_list = eval(banner_slogan.getAttribute('lis'))
        let slogan_time = Number(banner_slogan.getAttribute('slogan_time'))

        let slogan_index = 0;
        let slogan_timer = null
        slogan_timer = setInterval(() => {
            slogan_index++
            if (slogan_index === slogan_list.length) {
                slogan_index = 0
            }
            if (!slogan_time) {
                clearInterval(slogan_timer)
            } else {
                banner_slogan.innerText = slogan_list[slogan_index]
            }

        }, slogan_time * 1000)


        {#let avatar_img = document.querySelector('.avatar_img')#}
        {#avatar_img.addEventListener("mouseleave", function () {#}
        {#    avatar_img.classList.add('active')#}
        {#    setTimeout(() => {#}
        {#        avatar_img.classList.remove('active')#}
        {#    }, 1000)#}
        {# })#}
    </script>
{% endblock %}

{% block user_card_js %}
    <script>
        // 初始化粒子（画布id）
        {#particle.init('my_canvas');#}

        let actions_wid = document.querySelector('.actions').clientWidth * 0.75
        let actions_tag = document.querySelector('.actions_tag')
        let actions_all = document.querySelector('.actions_all')
        let actions_all_wid = actions_all.clientWidth

        if (actions_all_wid >= actions_wid) {
            actions_tag.style.width = actions_wid + 'px'
        }

        if (actions_all_wid < actions_wid) {
            actions_tag.style.width = actions_all_wid + 'px'
        }

        {#setInterval(() => {#}
        {#    console.log(actions_all.offsetLeft)#}
        {# }, 1000)#}
        {#console.log(actions_tag.offsetLeft)#}

        (function () {
            let container = document.querySelector('.user_card .introduce')
            let data = container.innerText.split('')
            let index = 0
            let timer = null
            container.innerText = ''

            function writing() {
                if (index < data.length) {
                    // 追加文字
                    container.innerText += data[index++]
                    // 没错，也可以通过，clearTimeout取消setInterval的执行
                    {#index === 4 && clearTimeout(timer)#}
                } else {
                    clearInterval(timer)
                }
            }

            // 使用 setInterval 时，结束后不要忘记进行 clearInterval
            timer = setInterval(writing, 300)
        })()
    </script>
{% endblock %}

{% block article_js %}

{% endblock %}

{% if MUSIC_GROUP_ID %}
    <script src="/static/aplayer/APlayer.min.js" class="apJs" data-id="{{ MUSIC_GROUP_ID }}"></script>
    <script>
        async function aplayer_main() {
            let apJs = document.querySelector('.apJs')
            let id = apJs.getAttribute('data-id')
            let res = await axios.get(`https://api.i-meto.com/meting/api?server=netease&type=playlist&id=${id}`)
            const ap = new APlayer({
                container: document.getElementById('aplayer'),
                theme: '#409eff',
                fixed: true,
                listFolded: true,
                preload: 'auto',
                listMaxHeight: '263px',
                storageName: 'aplayer-setting',
                // 歌词显示，考虑显示歌词样式不好看，暂不显示
                {#lrcType: 3, #}
                volume: 0.5,
                audio: res
            });
            let play = localStorage.getItem('music_play')
            let music_index = localStorage.getItem('music_index')
            let time = localStorage.getItem('music_time')

            // 现在播放到第几首歌
            ap.list.switch(music_index);

            // 将进度拖动到对应位置，必须要用定时器
            setTimeout(() => {
                ap.seek(parseInt(time) + 1);
            }, 300)

            //判断是否播放
            if (play === "false") {
                ap.play();
            }

            window.onbeforeunload = (e) => {
                //监听是否刷新，然后将音乐的索引和时间写入本地
                localStorage.setItem('music_play', ap.audio.paused)//离开前记录的音乐状态
                localStorage.setItem('music_time', ap.audio.currentTime)//离开前记录的音乐时间
                localStorage.setItem('music_index', ap.list.index)//离开前记录的音乐
            };
        }

        aplayer_main()
    </script>
{% endif %}

{#{% if ONLINE_CHAT %}#}
{#    <script>#}
{#        let windowWidth = document.documentElement.clientWidth || document.body.clientWidth;#}
{#        if (windowWidth > 500) {#}
{#            document.write(`<script src="/static/chat/chat.js" async="async" fold><\/script>`);#}
{#        }#}
{#    </script>#}
{#{% endif %}#}

{% if CALENDAR %}
    <script type="text/javascript" src="/static/echarts/echarts.min.js"></script>
    <script>
        async function article_calendar() {

            let color = "#000000"
            let inRangeColor = [
                "#ebedf0", "#c6e48b", "#7bc96f", "#32af4a",
                "#1a792c", "#0f5e1e", "#0f491a", "#02340c"
            ]
            let borderColor = "#fff"

            if (vue.theme === "dark") {
                color = "#5a5a5a"
                inRangeColor = [
                    "#404148", "#c6e48b", "#7bc96f", "#32af4a",
                    "#1a792c", "#0f5e1e", "#0f491a", "#02340c"
                ]
                borderColor = "#222429"
            }

            let chart = document.getElementById("post-calendar")
            if (!chart) {
                return
            }
            let res = await axios.get('/api/article/')
            let article_change = res['data']['article_date_range']
            let article_data = res['data']['article_date_list']
            let myChart = echarts.init(chart), option = {
                tooltip: {
                    padding: 10,
                    backgroundColor: "#555",
                    borderColor: "#777",
                    borderWidth: 1,
                    formatter: function (e) {
                        e = e.value;
                        return '<div style="font-size: 14px;">' + e[0] + "：" + e[1] + "</div>"
                    }
                },
                visualMap: {
                    show: !0,
                    showLabel: !0,
                    categories: [0, 1, 2, 3, 4, 5, 6, 7],
                    calculable: !0,
                    inRange: {
                        symbol: "rect",
                        color: inRangeColor
                    },  // 对应上面的四个值
                    itemWidth: 12,
                    itemHeight: 12,
                    orient: "horizontal",
                    left: "center",
                    bottom: 0,
                    textStyle: {
                        color: color
                    }
                },
                calendar: [{
                    top: 25,
                    left: "center",
                    range: article_change,  // 时间范围
                    cellSize: [13, 13],
                    splitLine: {show: !1},
                    itemStyle: {color: "#196127", borderColor: borderColor, borderWidth: 2},
                    yearLabel: {show: !1},
                    monthLabel: {
                        nameMap: "cn",
                        fontSize: 11,
                        color: color
                    },
                    dayLabel: {
                        formatter: "{start}  1st",
                        nameMap: "cn",
                        fontSize: 11,
                        color: color
                    }
                }],
                series: [
                    {
                        type: "heatmap",
                        coordinateSystem: "calendar",
                        calendarIndex: 0,
                        data: article_data,
                    }
                ],
            };
            myChart.setOption(option)

            window.onresize = () => {
                myChart.resize();
            }
        }

        article_calendar()
    </script>
{% endif %}
</html>